.container_float{
    width:100%;
   
}
p{
    margin:10px 0;
}
.item_left{
    background: red;
    height: 60px;
}
.item_center{
    background: yellow;
    height: 60px;
}
.item_right{
    background: green;
    height: 60px;
}
.item_left{
    width:300px;
    float:left;
}
.item_right{
    width:300px;
    float: right;
}
.item_center{
    width: auto;
}
.layout.absoulte{
    margin-bottom:80px;
}
.layout.absoulte .left-center-right{
   position: relative;
} 
.layout.absoulte .left-center-right>div{
    position: absolute;
}
.layout.absoulte .left{
    left:0;
    width:300px;
    background: red;
}

.layout.absoulte .center{
    width:auto;
    left:300px;
    right:300px;
    background: yellow;
}

.layout.absoulte .right{
    width:300px;
    right:0;
    background: green;
}

.layout.flexbox .left-center-right{
    display: flex;
}
.layout.flexbox  .left{
    width:300px;
    background: red;
}

.layout.flexbox  .center{
    flex:1;
    background: yellow;
}

.layout.flexbox  .right{
    width:300px;
    background: green;
}

.layout.table .left-center-right{
    display: table;
    width: 100%;
    min-height: 60px;
}
.layout.table  .left{
    width:300px;
    background: red;
    display: table-cell;
}

.layout.table  .center{
    background: yellow;
    display: table-cell;
}

.layout.table .right{
    width:300px;
    background: green;
    display: table-cell;
}

.layout.grid .left-center-right{
    display: grid;
    grid-template-rows:60px;
    grid-template-columns: 300px auto 300px;
    width: 100%;
}
.layout.grid  .left{
    background: red;
}
.layout.grid  .center{
    background: yellow; 
}

.layout.grid .right{
    background: green;
}